<template>
<div>
    <el-breadcrumb separator="/">
         <el-breadcrumb-item >我的项目管理</el-breadcrumb-item>
  
    </el-breadcrumb>
    <el-row>
        <el-col>
        <el-table
        :data="userlist.slice((page-1)*pageSize,pageSize*page)"
        style="width:100%"
        class="tableinfo margintop20"
        :header-cell-style="{'text-align':'center'}"
        :cell-style="{'text-align':'center'}"
        stripe
        >

        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="项目名称" prop="title"></el-table-column>
        <el-table-column label="项目地址" prop="lianjie"></el-table-column>
        
        <el-table-column label="项目类别" prop="category"></el-table-column>
        <el-table-column label="项目描述" prop="miaoshu"></el-table-column>
        <el-table-column label="项目技术" prop="jishu"></el-table-column>
        <el-table-column label="难点亮点" prop="nandian"></el-table-column>
        <el-table-column label="得分" sortable></el-table-column>
        <el-table-column label="操作" >
            <template slot-scope="scope">
                <el-button type="success" class="caozuo" @click="updateone(scope.row)"><p>编辑</p></el-button>
            <el-button type="danger" class="caozuo"
            @click="delxiangmu(scope.row)"
            ><p>删除</p></el-button>
            </template>
            
            
       
        </el-table-column>




        </el-table>
        <div class="tan">
         <el-pagination
            background
            layout="prev,pager,next"
            :total="total"
            @current-change='changecurrent'
            :page-size="pageSize"
            :current-page="page"
            >

         </el-pagination>
        <span>共 {{total}} 条数据</span>
        </div>
    
    </el-col>
    
    </el-row>
    <el-dialog
        title="修改用户"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        
            <el-form 
                        :model="form" 
                        :rules="rules"
                        ref="myform" 
                        label-width="100px"
                        label-position="left" 
                        class="myform">
                        <el-form-item label="项目名称" prop="title">
                            <el-input v-model="form.title"></el-input>
                        </el-form-item>
                        <el-form-item label="项目链接" prop="lianjie">
                            <el-input v-model="form.lianjie"></el-input>
                        </el-form-item>
                        <el-form-item label="项目类别" prop="category">
                            <el-cascader
                                style="width:100%"
                               
                                 @change="handleChange"
                                :options="options"
                                ></el-cascader>
                        </el-form-item>
                        <el-form-item label="项目描述" prop="miaoshu">
                            <el-input v-model="form.miaoshu"></el-input>
                        </el-form-item>
                        <el-form-item label="项目技术" prop="jishu">
                            <el-input v-model="form.jishu"></el-input>
                        </el-form-item>
                        <el-form-item label="难点亮点" prop="nandian">
                            <textarea v-model="form.nandian" style="width:200px;height:100px"></textarea>
                        </el-form-item>
                    </el-form>

        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="updateById()">确 定</el-button>
        </span>
    </el-dialog>
        
        
        
</div>
    

</template>

<script>
import {xiangmucatetory} from "@/utils"
import {getxiangmulist,delxiangmuAjax,updatexiangmu} from "@/api"
import Vue from "vue"
export default {
    name:"userlist",
    data(){
        return{
            userlist:[],
            pageSize:6,
            page:1,
            form:{},
            dialogVisible:false,
            options:xiangmucatetory,
            rules:{
                
            }
        }
    },
    computed:{
        total(){
            return this.userlist.length
        }
    },
    mounted(){
        getxiangmulist()
        .then(res=>{
            if(res.type){
                this.$nextTick(()=>{
                    this.userlist = res.result
                })
            }
        })
    },
    methods:{
        updateById(){
            this.$refs.myform.validate(valid=>{
                if(valid){
                    console.log(this.form)
                    updatexiangmu(this.form)
                    .then(res=>{
                        this.dialogVisible =false
                        this.userlist.forEach((item,i) => {
                            if(item._id==this.form._id) {
                                Vue.set(this.userlist,i,this.form)
                            }
                        });
                        
                    }).catch(err=>{

                    })
                }else{
                    return false
                }
            })
        },
        updateone(row){
            this.dialogVisible=true
            // this.form = row
            this.form = {...this.form,...row}

        },
        handleClose(){
            this.dialogVisible=false
        },
        changecurrent(current){
            this.page = current
        },
        handleChange(){

        },
        delxiangmu(row){
            console.log(row)
            var roleid = sessionStorage.getItem("roleid")
            delxiangmuAjax({
                _id:row._id
            })
            .then(res=>{
                if(res.type){
                    this.userlist=this.userlist.filter(item=>item._id!==row._id)
                }
            }).catch(err=>{

            })
        }
    }
}
</script>


<style lang="scss" scoped>
    .caozuo{
        width: 20px;
        height: 30px;
        position: relative;
        span{
            p{
                display: block;
                width: 20px;
                height: 30px;
                position: absolute;
                top: 14px;
                left: -7px;
                right: 0;
                bottom: 0;
                margin: auto;
            }
        }
    }
    .tan{
        display: flex;
        align-items: center;
    }
</style>